<nz-card>
  <nz-skeleton [nzActive]="true" [nzLoading]="loading" [nzParagraph]="{ rows: 6 }">

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.email_notifications_enabled"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>Send me email notifications</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        This includes new task assignments.
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.daily_digest_enabled"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>Send me a daily digest</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        Every evening, you will receive a summary of recent activity in tasks.
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.popup_notifications_enabled"
        (nzCheckedChange)="updateSettings();requestPermissions()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>Pop up notifications on my computer when Worklenz is open</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        Pop up notifications can be disabled by your browser. Change your browser settings to allow them.
      </p>

      <nz-divider class="my-3"></nz-divider>
    </ng-container>

    <ng-container>
      <label
        nz-checkbox
        [(nzChecked)]="model.show_unread_items_count"
        (nzCheckedChange)="updateSettings()"
        class="d-flex align-items-baseline mb-2"
      >
        <h4 class="mb-0" nz-typography>Show the number of unread items</h4>
      </label>
      <p class="mb-0" nz-typography nzType="secondary">
        You’ll see counts for each notification.
      </p>
    </ng-container>

  </nz-skeleton>
</nz-card>
